<template>
    <div class="reset-page flex justify-center items-center w-screen h-screen">
        <img class="login-bg" src="@/assets/images/login/bg.jpg"/>
        <el-card class="w-full">
            <div slot="header" class="logo">
                <img src="@/assets/images/login/login-logo.png" alt="">
            </div>
            <div slot="header" class="text-center text-xl">{{ $store.state.site_title }}</div>
            <el-form
                :model="emailForm"
                :rules="emailRules"
                ref="emailForm"
                v-if="!hasCode"
                label-position="top">
                <div class="get-code">
                    <el-form-item class="email border-b border-solid border-gray-200" prop="email">
                        <el-input
                            v-model="emailForm.email"
                            class="p-1 h-10 text-sm"
                            placeholder="邮箱"/>
                    </el-form-item>
                    <el-form-item class="reset-code" prop="code">
                        <div class="flex border-b border-solid border-gray-200">
                            <el-input
                                v-model="emailForm.code"
                                class="p-1 h-10 text-sm"
                                placeholder="验证码"/>
                            <el-button
                                type='text'
                                @click="onGetCode">获取验证码</el-button>
                        </div>
                    </el-form-item>
                    <el-button
                        type="primary"
                        class="next w-full"
                        @click="onNext"
                        :loading="isBtnLoading">下一步</el-button>
                </div>
            </el-form>
            <el-form
                :model="passwordForm"
                :rules="passwordRules"
                ref="passwordForm"
                v-else
                label-position="top">
                <div class="set-password">
                    <el-form-item class="password border-b border-solid border-gray-200" prop="new_password">
                        <el-input
                            show-password
                            v-model="passwordForm.new_password"
                            class="p-1 h-10 text-sm"
                            placeholder="设置密码"/>
                    </el-form-item>
                    <el-form-item class="confirm-pwd border-b border-solid border-gray-200" prop="confirmPwd">
                        <div class="flex">
                            <el-input
                                show-password
                                 v-model="passwordForm.confirmPwd"
                                 class="p-1 h-10 text-sm"
                                 placeholder="确认密码"/>
                        </div>
                    </el-form-item>
                    <el-button
                         type="primary"
                         class="next w-full"
                         @click="onResetPwd">确认</el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import {
    Input, Form, FormItem,
} from 'element-ui';

export default {
    component: {
        ElInput: Input,
        ElForm: Form,
        ElFormItem: FormItem,
    },
    props: {},
    data() {
        return {
            hasCode: false,
            emailForm: {
                email: '',
                code: '',
                domain: 'admin',
            },
            passwordForm: {
                new_password: '',
                confirmPwd: '',
            },
            emailRules: {
                email: [
                    { required: true, message: '请输入邮箱', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' },
                ],
            },
            passwordRules: {
                new_password: [
                    { required: true, message: '请输入新密码', trigger: 'blur' },
                ],
                confirmPwd: [
                    { required: true, message: '请再次输入密码', trigger: 'blur' },
                ],
            },
            isBtnLoading: false,
        };
    },
    methods: {
        onGetCode() {
            if (!this.emailForm.email) return $ele.$message.warning('请输入邮箱');

            API.get('../supplier/email', {params: this.emailForm}).then(() => {
                $ele.$message.success('验证码已发送到您的邮箱');
            });
        },
        onNext() {
            this.$refs.emailForm.validate((valid) => {
                if (!valid) return;
                API.post('../supplier/email', this.emailForm).then(() => {
                    this.hasCode = true;
                });
            });
        },
        onResetPwd() {
            const params = {
                email: this.emailForm.email,
                new_password: this.passwordForm.new_password,
            };
            this.$refs.passwordForm.validate((valid) => {
                if (!valid) return;
                if (this.passwordForm.new_password !== this.passwordForm.confirmPwd) {
                    $ele.$message.error('两次密码不一样');
                    return;
                }
                API.post('auth/password', params).then(() => {
                    $ele.$message.success('修改成功');
                    this.$router.push('/login');
                });
            });
        },
    },
};
</script>

<style lang="scss">
    .reset-page{
        position: relative;
        min-width: 1200px;
        background: #e1e2e2;

        .el-form-item input{
            border: none;
        }

        .el-card {
            width: 420px;
            position: relative;
            overflow: visible;
        }

        .el-button {
            height: 35px;
            font-size: .875rem;
        }

        .next {
            background: #2d70ae;
        }

        .next.el-button--primary {
            border-color: #2d70ae;
        }

        .reset-code .el-button {
            color: #2d70ae;
        }

        .logo {
            width: 200px;
            margin: 0 auto;
        }

        .login-bg {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }
</style>
